<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all.js" ></script>
<script type="text/javascript">
Ext.onReady(function(){		
		
	var myStore = new Ext.data.JsonStore({
        autoLoad: true,
        pageSize: 10,
        proxy: {
            type: 'ajax',
            url: 'query.action',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'totalProperty',
            }
        },
        model: Ext.define('model_name', {
            extend: 'Ext.data.Model',
            /*:::欄位設定:::*/
            fields: [
                'id',
                'username',
                'password'
            ]
        })

    });
	
	var myGrid = new Ext.grid.GridPanel({
		title: "資料庫系統",
        autoWidth: true,
        height: 600,
        store: myStore,
        padding: 10,
        renderTo: Ext.getBody(),
        plugins: Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 2,
            clicksToMoveEditor: 1,
            autoCancel: true
        }),
        columns: [
			{
				header:'動作',dataIndex:'id',
				renderer: function (value, r) {
			        var id = Ext.id();
			        Ext.defer(function () {
			            Ext.widget('button', {
			                renderTo: id,
			                Id: value,
			                text: '刪除',
			                width: 75,
			                handler: function () {
			                    Ext.MessageBox.confirm('刪除通知', '你確定要刪除?', function (result) {
			                        if (result == 'yes') {
			                        	if(this.Id==null){                                    		
			                        		var selectedRecord = myGrid.getSelectionModel().getSelection()[0];
			                        		var row = myStore.indexOf(selectedRecord);
			                        		//alert(row);
			                        		myStore.removeAt(row);
			                        	}else{
			                        		Ext.Ajax.request({
			                                    url: 'Delete.action',
			                                    disableCaching: true,
			                                    method: 'GET',
			                                    params: {
			                                        "id": this.Id
			                                    },
			                                    success: function (response, opts) {
			                                        myStore.reload();
			                                    },
			                                    failure: function (response, opts) {
			                                    	Ext.Msg.alert("GG","GG");
			                                    }
			                                });
			                        	}
			                        }
			                    }, this);
			                }
			            });
			        }, 50);
			        return Ext.String.format('<div id="{0}"></div>', id);
			    }
			},
            {
        		header:'帳號',dataIndex:'id',flex:1
        	},
        	{
        		header:'使用者',dataIndex:'username',flex:1,
        		editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
        	},
        	{
        		header:'密碼',dataIndex:'password',flex:1,
        		editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
        	}
        ],
        tbar:[
			{
				xtype: 'button',
			    text: '新增',
			    handler: function () {
			        myStore.add({
			            'username': 'new username',
			            'password': 'new password'
			        });
			    }            	 
			},
			{
				xtype: 'button',
			    text: '儲存',
			    handler: function () {
			        var newRecord = myStore.getNewRecords();
			        if (newRecord) {
			            Ext.each(newRecord, function (item) {
			                //item.data   
			                Ext.Ajax.request({
			                    url: 'Insert.action',
			                    disableCaching: true,
			                    method: 'POST',
			                    params: {
			                        "data": Ext.JSON.encode(item.data)
			                    },
			                    success: function (response, opts) {
			                    	myStore.reload();
			                        Ext.MessageBox.show({
			                            title: '通知',
			                            icon: Ext.MessageBox.INFO,
			                            buttons: Ext.Msg.OK,
			                            msg: '新增完成'
			                        });
			                    },
			                    failure: function (response, opts) {
			                    	Ext.Msg.alert("通知","新增完成");
			                    }
			                });
			            });
			        }
			
			
			        var modifyRecord = myStore.getModifiedRecords();
			        if (modifyRecord) {
			            Ext.each(modifyRecord, function (item) {
			
			                Ext.Ajax.request({
			                    url: 'Update.action',
			                    disableCaching: true,
			                    method: 'POST',
			                    params: {
			                        "data": Ext.JSON.encode(item.data)
			                    },
			                    success: function (response, opts) {
			                    	myStore.reload();
			                        Ext.MessageBox.show({
			                            title: '通知',
			                            icon: Ext.MessageBox.INFO,
			                            buttons: Ext.Msg.OK,
			                            msg: '修改完成'                                        
			                        });
			                    },
			                    failure: function (response, opts) {
			                    	Ext.Msg.alert("通知","修改完成");
			                    }
			                });
			            });
			        }
			    }
			}
		],
		listeners:{        	
		}
	});
		
	
});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
</head>
<body>

</body>
</html>